<template>
    <div>
        <el-page-header @back="back" content="分配记录"></el-page-header>
        <div class="interspaceH"></div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="已分配客户" name="first">
                <el-card class="box-card">
                    <el-form :inline="true" :model="queryClientData" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="queryClientData.clientName" placeholder="请输入客户名称"
                                      size="small"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryClientData.takeoverUserName" placeholder="请输入接替员工名称"
                                      size="small"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    size="small"
                                    v-model="queryClientData.updateTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryClientData.unassignedType" placeholder="请选择接替状态" size="small"
                                       clearable>
                                <el-option v-for="item in dictionary.unassignedType" :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="queryClientHandle(1, 10)">查询</el-button>
                            <el-button size="small" @click="resetQueryClientHandle">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="interspaceH"></div>
                <el-card class="box-card">
                    共 {{ clientDataSource.length }} 个已分配客户
                    <el-table :data="clientDataSource" style="width: 100%">
                        <el-table-column prop="clientName" label="客户昵称" :formatter="formatter"></el-table-column>
                        <el-table-column prop="handoverUserName" label="离职员工" :formatter="formatter"></el-table-column>
                        <el-table-column prop="takeoverUserName" label="接替员工" :formatter="formatter"></el-table-column>
                        <el-table-column prop="updateTime" label="分配时间" :formatter="formatter"></el-table-column>
                        <el-table-column prop="unassignedType" label="转接状态" :formatter="formatter"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="clientDetail(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="interspaceH"></div>

                    <el-pagination @size-change="queryClientHandle(clientPagePagination.currentPage,$event)"
                                   @current-change="queryClientHandle($event,clientPagePagination.pageSize)"
                                   :current-page="clientPagePagination.currentPage"
                                   :page-sizes="clientPagePagination.pageSizes" :page-size="clientPagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="clientPagePagination.total">
                    </el-pagination>

                    <el-dialog title="已分配客户详情" :visible.sync="clientRecordVisible" width="30%"
                               :close-on-click-modal="false">
                        <el-form ref="form" :model="clientRecord" label-width="80px">
                            <el-form-item label="客户名称">
                                <el-input v-model="clientRecord.clientName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="离职员工">
                                <el-input v-model="clientRecord.handoverUserName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="接替员工">
                                <el-input v-model="clientRecord.takeoverUserName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="转接状态">
                                <el-input v-model="clientRecord.unassignedType" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="离职时间">
                                <el-input v-model="clientRecord.dimissionTime" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="分配时间">
                                <el-input v-model="clientRecord.updateTime" :disabled="true"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="clientRecordVisible = false">返回</el-button>
                        </span>
                    </el-dialog>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="已分配群聊" name="second">
                <el-card class="box-card">
                    <el-form :inline="true" :model="queryGroupData" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="queryGroupData.user" placeholder="请输入要搜索群名称" size="small"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryGroupData.region" placeholder="请选择接替员工" size="small">
                                <el-option label="员工1" value="shanghai"></el-option>
                                <el-option label="员工2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    size="small"
                                    v-model="queryGroupData.value"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small">查询</el-button>
                            <el-button size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="interspaceH"></div>
                <el-card class="box-card">
                    共 {{ groupDataSource.length }} 个已分配群聊
                    <el-table :data="groupDataSource" style="width: 100%">
                        <el-table-column prop="clientGroupName" label="群名称" :formatter="formatter"></el-table-column>
                        <el-table-column prop="empName" label="接替员工" :formatter="formatter"></el-table-column>
                        <el-table-column prop="status" label="转接状态" :formatter="formatter"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="groupDetailHandle(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="interspaceH"></div>

                    <el-pagination @size-change="queryGroupHandle(groupPagePagination.currentPage,$event)"
                                   @current-change="queryGroupHandle($event,groupPagePagination.pageSize)"
                                   :current-page="groupPagePagination.currentPage"
                                   :page-sizes="groupPagePagination.pageSizes" :page-size="groupPagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="groupPagePagination.total">
                    </el-pagination>
                    <el-dialog title="已分配群聊详情" :visible.sync="groupRecordVisible" width="70%" :close-on-click-modal="false">
                        <el-form ref="form" :model="groupRecord" label-width="80px">
                            <el-form-item label="客群名称">
                                <el-input v-model="groupRecord.clientGroupName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="接替员工">
                                <el-input v-model="groupRecord.empName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="转接状态">
                                <el-input v-model="groupRecord.status" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="groupRecordVisible = false">返回</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

const queryClientData = {
    clientName: "",
    takeoverUserName: "",
    updateTime: "",
    unassignedType: ""
}

const queryGroupData = {
    clientGroupName: '',//客户群名称
    empName: ""//群主名称
}

const unassignedType = [
    {
        value: '1',
        label: '接替完毕'
    },
    {
        value: '2',
        label: '等待接替'
    },
    {
        value: '3',
        label: '客户拒绝'
    },
    {
        value: '4',
        label: '接替成员客户达到上限'
    }
]

const status = [
    {
        value: '0',
        label: '跟进人正常'
    },
    {
        value: '1',
        label: '跟进人离职'
    },
    {
        value: '2',
        label: '离职继承中'
    },
    {
        value: '3',
        label: '离职继承完成'
    }
]

export default {
    name: "allocation",
    data() {
        return {
            clientRecordVisible: false,
            groupRecordVisible: false,
            activeName: 'first',
            queryClientData: {...queryClientData},
            queryGroupData: {...queryGroupData},
            dictionary: {
                unassignedType: unassignedType,
                status: status
            },
            fieldType: {
                unassignedType: "array",
                updateTime: "datetime",
                dimissionTime: "datetime",
                status: "array"
            },
            clientDataSource: [],
            clientRecord: {},
            groupDataSource: [],
            groupRecord: {},
            clientPagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            groupPagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.queryClientHandle()
        this.queryGroupHandle()
    },
    methods: {
        queryClientHandle(page = 1, row = 10) {
            let that = this;
            let queryData = {...this.queryClientData}

            if (queryData['updateTime'] != null && queryData['updateTime'] != "") {
                queryData['startUpdateTime'] = queryData['updateTime'][0]
                queryData['endUpdateTime'] = queryData['updateTime'][1]
                delete queryData['updateTime']
            }

            let payload = {
                ...queryData,
                unassignedTypeList: ["1", "2", "3", "4"],
                pageNum: page,
                pageSize: row
            }

            that.$request("/api/clientMigration/getMigrationsByParams/1_0", payload, "POST").then((data) => {
                this.clientDataSource = data.rows
                that.clientPagePagination['total'] = data.total
                that.clientPagePagination['pageSize'] = data.row
            })
        },
        queryGroupHandle(page = 1, row = 10) {
            let that = this;

            let payload = {
                ...queryGroupData,
                statusList: ["2", "3"],
                pageNum: page,
                pageSize: row
            }

            that.$request("/api/custGroup/selectAll/1_0", payload, "POST").then((data) => {
                data.rows.map((item) => {
                    item['status'] = JSON.stringify(item['status'])
                })
                that.groupDataSource = data.rows
                that.groupPagePagination['total'] = data.total
                that.groupPagePagination['pageSize'] = data.row
            })
        },
        resetQueryClientHandle() {
            this.queryClientData = {...queryClientData}
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        clientDetail(row) {
            this.clientRecord = this.$utils.formatterForForm(row, this.fieldType, this.dictionary);
            this.clientRecordVisible = true
        },
        groupDetailHandle(row) {
            this.groupRecord = this.$utils.formatterForForm(row, this.fieldType, this.dictionary);
            this.groupRecordVisible = true
        },
        back() {
            this.$emit("currentHandler", "default")
        }
    }
}
</script>

<style scoped>

</style>